<script setup>

import {ref} from "vue";
import axios from "../../util/axios.js";

const handler = defineEmits(["handler"])
const props = defineProps({
  projectName:{
    type: String,
    required: true
  },
  imageName:{
    type: String,
    required: true
  },
  artifactName: {
    type: String,
    required: true
  }
})

const tagData = ref([])
const loading = ref(false)

/**
 * 时间格式化器
 * @param row
 * @param column
 * @param cellValue
 * @param index
 * @returns {string}
 */
const timeFormatter = (row, column, cellValue, index) => {
  return cellValue.indexOf("0001") === -1 && cellValue.replace('T', ' ').substring(0, 19)
}

const pullFormatter = (row, column, cellValue, index) => {
  return "docker pull " + props.projectName + "/" + props.imageName + ":" + cellValue
}

const changePage = (tagName) => {
  handler("handler", "tag", tagName)
}

const download = (tagName) => {
  loading.value = true
  let downLoadUrl = "/harbor/download/image?projectName=" + props.projectName + "&imageName=" + props.imageName + "&tagName=" + tagName
  fetch(downLoadUrl)
      .then(response => {
        loading.value = false
        let filename = 'example.tar';  // 默认文件名
        const disposition = response.headers.get('Content-Disposition');
        const matches = /filename="([^"]*)"/.exec(disposition);
        if (matches != null && matches[1]) {
          filename = matches[1];
        }
        return response.blob().then(blob => {
          const link = document.createElement('a');
          link.href = URL.createObjectURL(blob);
          link.download = filename;  // 使用从 header 中提取的文件名
          link.click();
        });
      })
      .catch(error => console.error('Error downloading the tar file:', error))
}

axios.get("/harbor/tags/list?projectName=" + props.projectName + "&imageName=" + props.imageName + "&artifactName=" + props.artifactName).then(res => {
  tagData.value = res.data
})
</script>

<template >
  <el-table
      :data="tagData"
      border
      class="table"
      v-loading="loading"
      element-loading-text="正在加载文件..."
      style="width: 100%"
  >
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="name" label="拉取命令" :formatter="pullFormatter" />
    <el-table-column prop="push_time" label="推送时间" :formatter="timeFormatter" />
    <el-table-column prop="pull_time" label="拉取时间" :formatter="timeFormatter" />
    <el-table-column prop="name" label="操作" >
      <template #default="{row}">
        <el-button type="primary" size="small" @click="download(row.name)" class="project-button">
          下载tar包
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>
.table, .table *,
.el-table th.el-table__cell,
el-table--border, el-table--border * {
  background-color: #00364d !important;
  color: #ffffff;
  border-color: #002222 !important;
}

.el-table__inner-wrapper:before,
.el-table--fit .el-table__inner-wrapper:before {
  background-color: #00364d !important;
}

.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom-color: #00364d !important;
}

.project-button * {
  color: #4aaed9 !important;
}
</style>